<script setup lang="ts" name="history">
import { _history } from '@/api/api'
import { useRequest } from 'alova'
import { reactive, onMounted } from 'vue'
import { useLoadingBar,useNotification  } from 'naive-ui'
import { useAppStore } from '@/store'
import { TimerOutline,VideocamOutline,Repeat,TimeOutline,TrashOutline,Add,CheckmarkDoneOutline } from '@vicons/ionicons5'
import { open_win } from '@/utils/comm'
import { onBeforeRouteLeave } from 'vue-router'
import { _mylike } from '@/api/api'

 
const open_small= ()=> {
  open_win("/home/small?pid="+data.tag_id+"&odr="+data.odr,330,60,1)
}

const notification = useNotification()
const store = useAppStore()
const thems =  reactive({
  menu_left:  store.thems?.menu_left?true:false,
});
const loadingBar = useLoadingBar()
 

const select_tag= (id:any,name:any)=> {
  data.tag_id = id
  data.new_tagid = id
  data.new_tags = name
  get_list()
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const data =  reactive({
  pge:1,
  cnt:100,
  loading: false,
  list:[] as any,
  list1:{} as any,
  cachePage: [] as any,
  num_his:4,
  tags:[] as any,
  tag_id:1,
  drawer:false,
  new_tags:"",
  new_tagid:0,
  value:"",
  mod:false,
  odr:'desc'
});

const edit_tags= ()=> {
   data.drawer = data.drawer?false:true
}

const on_odr= ()=> {
   data.odr = data.odr=='asc'?'desc':'asc'
   get_list()
}

async function on_refresh(){
  loadingBar.start()
  get_tags()
  get_list()
}

async function get_list() {
  const { onSuccess }  = useRequest(_mylike.mylike_list({
    pge: data.pge,
    cnt: data.cnt,
    pid: data.tag_id,
    odr:data.odr
  }))
  onSuccess((res:any) => {
    data.list = res.data.list 
    data.list1 = res.data.list[0]
    setTimeout(() => {
    loadingBar.finish()
  }, 200)
  });  
}

async function mylike_del(id:any) {
  const { onSuccess }  = useRequest(_mylike.mylike_del({
    id: id,
  }))
  onSuccess((res:any) => {
    msg(res.data.message)
    get_tags()
    get_list()
  });
}

async function mylike_addtag() {
  if(!data.new_tags){
    msg('请输入节目单名称')
    return   
  }
  const { onSuccess }  = useRequest(_mylike.mylike_addtag({
    name: data.new_tags,
    id: data.new_tagid
  }))
  onSuccess((res:any) => {
    msg(res.data.message)
    get_tags()
  });
}

onBeforeRouteLeave((to, from, next) => {
  if (to.name === 'detail'&&from==from) {
    data.cachePage.list = ['Program']  
  } else {
    data.cachePage.list = []
  } 
  store.setcachePage(data.cachePage)
  next()
})


const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.num_his = 2
  }
}

async function get_tags() {
  const { onSuccess }  = useRequest(_mylike.mylike_tags({
    pge: 1,
    cnt: 100, 
  }))
  onSuccess((res:any) => {
    data.tags = res.data.list;
  });
}

 

const mylike_add= (item:any)=> {
    const { onSuccess }  = useRequest(_mylike.mylike_add({
            pid: item.pid, 
            id: item.video_id, 
            name:item.name,
            cover:item.cover,
            url:item.url,
            type:item.type,
            longs:item.longs,
            tags:item.tags
          }))
          onSuccess((res:any) => {
            console.log(res);
            let jmd = ''
            item.pid.forEach((element:any) => {
              jmd=jmd+"["+data.tags[element-1].label+"]";
            });
            on_refresh()
            msg("《"+item.name+'》加入'+jmd+'节目单'+data.mod)
          });  
}


onMounted(() => {
  getwindow_size()
  on_refresh()
}); 
</script>

<template>
  <div class="page_list page_up" :style="thems.menu_left?'height:calc(100vh - 150px);':''">
    <n-grid cols="4" item-responsive >
      <n-grid-item span="0 600:1" class="left">
      <div class="title">
          <n-tag round :bordered="false" size="large">节目单
            <template #avatar>
              <n-avatar :style="{backgroundColor:store.thems?.primary}">
                <n-icon><TimerOutline /></n-icon>
              </n-avatar>
            </template>
          </n-tag>

          <n-button strong size="tiny" @click="edit_tags" circle type="primary" style="margin-top: 5px;">
            <template #icon>
              <n-icon color="#fff"><Add /></n-icon>
            </template>
          </n-button>
      </div>
      <div style="width: 100%;margin-bottom: 10px;" v-show="data.drawer">
          <div class="search"  style="width: 100%;">
            <n-input-group >
              <n-input  v-model:value="data.new_tags" placeholder="添加节目单" autofocus="false" size="small" clearable />
              <n-button type="primary" size="small" @click="mylike_addtag">
                <template #icon>
                    <n-icon color="#fff"><CheckmarkDoneOutline /></n-icon>
                  </template>
                </n-button>
            </n-input-group>
          </div>
          
      </div>
   
      <div class="jm_list">
        <n-scrollbar style="height: calc(100vh - 120px);padding-right: 5px;" >
          <n-card @click="select_tag(item.id,item.name)" style="margin-bottom: 5px;" content-style="padding:10px 10px"  hoverable v-for="item in data.tags">
              <n-flex class="jm_item">
                <n-avatar :class="item.id==data.tag_id?'xuanzhuan':''" object-fit="cover" round  :size="48" :src="item.cnt_cover"/>
                <div>
                  {{item.name}}<br>
                  <span style="font-size: 12px;">本节目单共有{{item.cnt}}部 </span>
                </div>
              </n-flex>
              <div class="tag" v-if="item.id==data.tag_id" :style="'background:'+store.thems?.primary+''">已选</div>
          </n-card>
      </n-scrollbar>
      </div>
 
  </n-grid-item>
  
 
    <n-grid-item class="right" span="4 600:3">
      
      
      <div style="margin-bottom: 5px;">
        <n-grid cols="1" item-responsive >
      <n-grid-item span="0 600:1">
            <n-flex class="top1">
              <div class="top1_cover" >
                <n-image :key="data.list1.cover" class="img animated pulse" object-fit="cover" :src="data.list1.cover" preview-disabled/>
              </div>
              <div class="top1_tit">
                <n-ellipsis :line-clamp="1">{{data.list1.name}} </n-ellipsis>
                <div style="margin-bottom: 15px;overflow: hidden;white-space: nowrap;">
                <n-tag class="top_tag" :bordered="false" round v-for="item,index in data.list1.tags" v-show="index<5"> {{item}} </n-tag> 
                </div>
               
                <n-flex>
                  <n-button style="color:#fff" type="primary" round @click="open_small"><n-icon size="20"><VideocamOutline /></n-icon>&nbsp;播放本节目单</n-button>
                  <n-button strong style="color:#fff" :class="[data.odr=='asc'?'refreshIcon180':'refreshIcon0']" circle  type="primary" @click="on_odr">
                    <template #icon>
                      <n-icon><Repeat /></n-icon>
                    </template>
                  </n-button>
                </n-flex>
              </div>
            </n-flex>
          </n-grid-item>
    </n-grid>

            <n-scrollbar style="height: calc(100vh - 230px);padding-right:10px;margin-top: 10px;"  ref="list_ref" >
            <div class="jm_list" style="margin: 0;margin-top: 0px;">
              <n-card :key="item.id+'-'+data.new_tagid" style="margin-bottom: 5px;"  size="small" hoverable v-for="item,index in data.list"  >
                <template #header>
                  <n-flex class="jm_item">
                    <div style="display: flex;align-items: center;" v-if="index<9">0{{index+1}}</div>
                    <div style="display: flex;align-items: center;" v-else>{{index+1}}</div>
                    <div class="jm_cover" >
                      <img class="img2" :width="90"  style="object-fit:cover" :src="item.cover" preview-disabled/>
                    </div>
                    <div style="max-width: 300px;">
                      <n-ellipsis :line-clamp="1">{{item.name}} </n-ellipsis><br>
                      <span style="font-size: 12px;">{{item.dte}}</span>
                    </div>
                  </n-flex>
                </template>

                <template #header-extra>
                  <n-tag round :bordered="false" style="background-color: transparent;">
                    {{item.longs}}
                    <template #icon>
                      <n-icon  :component="TimeOutline" />
                    </template>
                  </n-tag>&nbsp;
                  <n-popselect  v-model:value="item.pid" trigger="click" multiple :options="data.tags" size="small" show-arrow placement="bottom-start"  @update:value="mylike_add(item)" >
                    <n-button size="small" quaternary circle>
                      <n-icon class="xiaoshou" size="20"><Add /></n-icon> 
                    </n-button>
                  </n-popselect>

                  <n-button size="small" quaternary circle>
                      <n-icon class="xiaoshou" @click="mylike_del(item.id)" size="20"><TrashOutline /></n-icon> 
                    </n-button>

                  <!-- <n-popconfirm class="xiaoshou" @positive-click="mylike_del(item.id)"  positive-text="确定" negative-text="算了">
                    <template #trigger>
                       <n-icon class="xiaoshou" size="20"><TrashOutline /></n-icon> 
                    </template>
                    需要移除{{item.name}}吗？
                </n-popconfirm> -->

                </template>

                  
              </n-card>
            </div>
            </n-scrollbar>


      </div>
    
    </n-grid-item>
  </n-grid>
    
  </div>
</template>

<style lang="scss" scoped>
  .page_list{
    height: calc(100vh - 52px);
    display: flex;
    .title{
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      width: 100%;
      margin-bottom: 10px;
    }
    .jm_list{
      width: 100%;
      position: relative;
    }
    
    .left{
      position: relative;
      padding:10px;
      border-right:5px solid  var(--hover1);
    }
    .right{
      width: 100%;
      
      padding:20px 10px;
 
      .top1{
        width: 100%;
        height: 130px;
        display: flex;
      }
      .top1_cover{
        // aspect-ratio: 1/0.6;
        height: 121px;
        .img{
          height: 100%;
          border-radius: 5px;
        }
      }
      .top1_tit{
        flex: 1;
        font-size: 30px;
        .span{
          font-size: 16px;
          padding: 10px 0;
        }
        .top_tag{
          margin-right: 3px;
        }
      }
    }
    .tag{
      position: absolute;
      right: 0;
      top:0;
      background-color: aqua;
      padding: 2px;
      font-size: 12px;
      border-radius: 2px;
      color: #fff;
      width: 60px;
      text-align: center;
    }
    .jm_cover{
        aspect-ratio: 1/0.6;
        height: 50px;
        display: flex;
        .img2{
          border-radius: 5px;
        }
      }
 
    
  }
 


  .light-mode { 
    
  }  
</style>